@import './base.less';
@import './less/element-plus.less';

#app {
  font-weight: normal;
  width: 100vw;
  height: 100vh;
  background-color: #00192d;
  background: url(@/assets/bg.png);
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;
  // aspect-ratio: 16/9;
}

#map {
  height: 100vh;
  width: 100vw;
  // aspect-ratio: 16/9;
}

body {
  &::-webkit-scrollbar {
    display: none;
  }
}

:root {
  --el-table-tr-bg-color: #19AEEF20;
  --el-table-header-bg-color: #0A577B;
  --el-fill-color-lighter: #0000;
  --el-table-header-text-color: #fff;
}

@media (min-width: 7600px) {

  .dom-scale,
  #map {
    width: 2240px;
    height: 1080px;
  }

  .dom-scale {
    transform: scale(4);
    transform-origin: 0 0;
  }
}

.line-color-normal {
  .idx {
    background-color: #4f8bda;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }

  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #4f8bda, #7cd5fa);
  }
}

.line-color-0 {
  .idx {
    background-color: #f66436;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }

  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #f66436, #ff9e80);
  }
}

.line-color-1 {
  .idx {
    background-color: #ffbe34;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }

  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #ffbe34, #ffde97);
  }
}

.line-color-2 {
  .idx {
    background-color: #77ce8e;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 3px;
  }

  .line-inner {
    transition: all 0.5s;
    background: linear-gradient(90deg, #77ce8e, #cdfcd9);
  }
}

.orderBody::-webkit-scrollbar {
  display: none;
}